import { createStore, combineReducers, applyMiddleware } from 'redux';
// 安装redux-devtools-extension的可视化工具。
import { composeWithDevTools } from 'redux-devtools-extension';
// 利用redux-logger打印日志
import { createLogger } from 'redux-logger';
// import * as actionTypes from './actionType'

console.group('<<<--- redux --->>>');
// console.log('actionTypes', actionTypes)

/**
 * reducer 本质上就是一个普通函数
 * 注意：reducer是一个纯函数，如果state是一个引用对象的时候（堆类型），操作后返回的值需要修改引用地址。(改变state引用地址)
 * @param {*} state 之前仓库中的状态（数据）注意state初始状态不能为undefined
 * @param {*} action 描述要作什么的对象
 * @returns
 */
function reducer(state = 1, action) {
  // 返回一个新的状态
  if (action.type === 'increase') {
    if (action.num) state += action.num;
    else state++;
    return state;
  } else if (action.type === 'decrease') {
    return state - 1;
  }
  return state;
}
// 第二个 reducer 函数仓库
const reducerTodo = (state = { num: 1 }, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        num: action.addNum ? (state.num += action.addNum) : state.num++
      };
    case 'REMOVE_TODO':
      if (action.removeNum) state.num -= action.removeNum;
      else state.num--;
      return { ...state };
    default:
      return state;
  }
};

/**
 * combineReducers：将多个reducer结合起来
 * 格式：{key: value} 形式
 */
const combing_reducers = combineReducers({
  myName: reducer,
  reducerTodo
});

// 使用日志打印方法， collapsed让action折叠，看着舒服。
const loggerMiddleware = createLogger({ collapsed: true });

// 第一参数 处理函数， 第二个参数，初始参数
// 创建一个数据仓库
// const store = createStore(reducer, 10, applyMiddleware)
const store = createStore(
  combing_reducers,
  // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  composeWithDevTools()
);

// 创建action来改变值
const action = {
  type: 'increase'
};

// 得到仓库中当前的值
// console.log("Readux 值", store.getState());

// 向仓库分发 action
store.dispatch(action);

console.groupEnd();
export default store;
